<template>
  <s-layout :positionAbsolute="'position: absolute;'"  id="layout" :title="'个人中心'" :navbar="normal" leftIconColor="#ffffff"   
	:autoBack="false" 
  :leftIcon="''"
	:bgColor="state.bgColor" 
	:titleStyle="{ color: '#FFF', fontSize: '32rpx' }"
  :onShareAppMessage="shareInfo"
  >
  <!-- 头部盒子 -->
  <view class="background" :style="{ backgroundImage: `url(${baseUrl}/uploads/uniapp_image/user_v1/usercenter_bg_bg2@2.png)`, paddingTop:(safeAreaInsets?.top + 44) + 'px'}">

    <!-- 头像 && 资料区域 -->
    <view class="data_area area">
      <!-- 头像 -->
      <view class="head">
        <up-avatar class="shadow" v-if="userStore.isLogin" :font-size="14" :src="sheep.$url.cdn(userStore.userInfo.avatar)" :size="state.size"></up-avatar>
        <up-avatar v-else :font-size="14" :src="state.src" :size="state.size"></up-avatar>
        <view class="displaySwitch" v-if="userStore.isLogin">
          <image v-if="userStore.userInfo.gender == 0" :src="`${baseUrl}/uploads/uniapp_image/user/personal__icon_woman.png`" mode="scaleToFill"/>
          <image v-else :src="`${baseUrl}/uploads/uniapp_image/user/personal_icon_man.png`" mode="scaleToFill"/>
        </view>
        
      </view>
      <!-- 名称 && 手机号码 -->
      <view class="center" v-if="userStore.isLogin">
        <view class="name">{{ userStore.userInfo.nickname }}</view>
        <view class="phone_box">
          <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/usercenter_icon_phone.png`" mode="scaleToFill"/>
          <up-text v-if="userStore.userInfo.mobile" class="phone" mode="phone" :text="userStore.userInfo.mobile" format="encrypt" :color="'$uni-text-color'"></up-text>
          <up-text @click="bindMobile" v-else class="phone" text="绑定手机号" :color="'$uni-text-color'"></up-text>
        </view>
        <view class="position">{{ userStore.userInfo.group?.name }}</view>
      </view>
      <view class="center" v-else @tap="login">
          <view class="name">登录/注册</view>
          <up-text class="phone" text="点击登录/注册" :color="'#ffffff'"></up-text>
      </view>
      <!-- 编辑资料按钮 -->
      <view class="Edit_data" v-if="userStore.isLogin">
        <view class="button" @tap="editDatapage">
          <view class="text">编辑资料</view>
          <view class="icon">
            <u-icon name="arrow-right" color="#FF5200" size="10" :bold="true"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <!-- 父盒子 -->
    <view class="father">
      <!-- 账户卡 -->
      <view class="account" >
        <!-- 左侧余额 -->
        <view class="balance">
          <!-- 上盒子 -->
          <view class="top_box" v-if="userStore.isLogin && userStore.userInfo.department.company">
            <!-- title标题 -->
            <view class="title">用户端 </view>
          </view>
          <!-- 金额 -->
          <view v-if="userStore.isLogin && userStore.userInfo.department.company">
            <view class="money">{{ userStore.userInfo.department.company?.name }} · {{ userStore.userInfo.department.deparment?.name }}</view>
          </view>
        </view>
        <!-- 右侧按钮 v-if="userStore.userInfo.group_id" -->
        <view class="Button_set" v-if=" userStore.isLogin && userStore.userInfo.department && userStore.userInfo.department?.company?.id == 1 && userStore.userInfo.is_entry == 1">
          <button class="top_up" @tap="switchUser" >切换员工端</button>
        </view>
      </view>
    </view>
    <view class="content">
        <!-- 切换用户端口盒子 -->
        <view class="switchover area">
        <!-- 信息栏 -->
          <view class="information_bar" @tap="surreptitious_entry">
            <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/usercenter_banner1.png`" mode="scaleToFill"/>
          </view>
        </view>
      <view class="area my_money">
        <view class="left">
          <view class="top_box">
                <!-- 图片 -->
                <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/usercenter_icon_balance@2.png`" mode="scaleToFill"/>
                <!-- title标题 -->
                <view class="title"> 我的余额 </view>
              </view>
              <!-- 金额 -->
              <view class="money"><text>￥</text> {{ userStore.userInfo.money }}</view>
        </view>
        <view class="line"><image :src="`${baseUrl}/uploads/uniapp_image/user_v1/usercenter_bg_fengexian@2.png`" mode="scaleToFill"/></view>
        <view class="right" @tap="goUrl('/subpackage/user/user/my_wallet')">
          <view>我的钱包</view>
          <view>WALLET</view>
        </view>
      </view>
    </view>
    <scroll-view scroll-y :style="{ height: '38vh' }">
      <!-- 全部功能 -->
      <view class="complete_box area" v-if="jurisdiction.includes(group_id)">
        <!-- 头部盒子 -->
        <view class="top_box">
          <view class="left_box">快捷办公</view>
        </view>
        <!-- 菜单栏 -->
        <view class="menu_two">
          <view class="for_menu" @tap="goUrl('/subpackage/user/user/contract_management_list')">
            <template>
              <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/user_icon4.png`" mode="scaleToFill" />
              <view class="title">合同管理</view>
            </template>
          </view>
          <view class="for_menu" @tap="goUrl('/subpackage/user/user/clock_in')">
            <template>
              <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/user_icon7.png`" mode="scaleToFill" />
              <view class="title">考勤打卡</view>
            </template>
          </view>
          <view class="for_menu" @tap="goUrl('/subpackage/staff/workbench/attendance_record/attendance_record')">
            <template>
              <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/user_icon12.png`" mode="scaleToFill" />
              <view class="title">考勤统计</view>
            </template>
          </view>
          <view class="for_menu" @tap="goUrl('/subpackage/staff/user/salary_slip/salary_slip')">
            <template>
              <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/user_icon9.png`" mode="scaleToFill" />
              <view class="title">工资条</view>
            </template>
          </view>
          <view class="for_menu" @tap="goUrl('/subpackage/user/user/user_borrowing/user_borrowing_list')">
            <template>
              <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/user_borrowing_icon.png`" mode="scaleToFill" />
              <view class="title">借支</view>
            </template>
          </view>

          <view class="for_menu" @tap="goUrl('/subpackage/user/user/user_leave/user_leave_apply')">
            <template>
              <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/user_askleave_icon.png`" mode="scaleToFill" />
              <view class="title">请假</view>
            </template>
          </view>
          <view class="for_menu" @tap="goUrl('/subpackage/user/user/user_dimission/user_dimission_list')">
            <template>
              <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/user_dimission_icon.png`" mode="scaleToFill" />
              <view class="title">离职</view>
            </template>
          </view>
          <view class="for_menu" @tap="goUrl('/subpackage/user/user/user_notification/user_notification')">
            <template>
              <view class="corner_mark" v-if="notification_count > 0">{{ notification_count && notification_count > 99  ? '+99' : notification_count }}</view>
              <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/user_nitification_icon.png`" mode="scaleToFill" />
              <view class="title">公告</view>
            </template>
          </view>
        </view>
      </view>

      <view class="complete_box area" v-if="is_principal == 1">
        <!-- 头部盒子 -->
        <view class="top_box">
          <view class="left_box">项目管理</view>
        </view>
        <!-- 菜单栏 -->
        <view class="menu_two">
          <view class="for_menu" @tap="goUrl('/subpackage/user/user/user_leave/user_leave_approval')">
            <template>
              <view class="corner_mark" v-if="ask_leave > 0">{{ ask_leave && ask_leave > 99  ? '+99' : ask_leave }}</view>
              <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/user_askleave_apply_icon.png`" mode="scaleToFill" />
              <view class="title">请假审批</view>
            </template>
          </view>
          <view class="for_menu" @tap="goUrl('/subpackage/user/user/user_dimission/user_dimission_approval')">
            <template>
              <view class="corner_mark" v-if="dimission > 0">{{ dimission && dimission > 99  ? '+99' : dimission }}</view>
              <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/user_dimission_apply_icon.png`" mode="scaleToFill" />
              <view class="title">离职审批</view>
            </template>
          </view>
          <view class="for_menu" @tap="goUrl('/subpackage/user/user/user_borrowing/user_borrowing_approve')">
            <template>
              <view class="corner_mark" v-if="borrowing > 0">{{ borrowing && borrowing > 99  ? '+99' : borrowing }}</view>
              <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/user_dimission_apply_icon.png`" mode="scaleToFill" />
              <view class="title">借支审批</view>
            </template>
          </view>
          <view class="for_menu" @tap="goUrl('/subpackage/user/user/user_notification/user_announce')">
            <template>
              <!-- <view class="corner_mark">{{ corner_mark_dimission && corner_mark_dimission > 99  ? '+99' : corner_mark_dimission }}</view> -->
              <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/user_post_notification_icon.png`" mode="scaleToFill" />
              <view class="title">发布公告</view>
            </template>
          </view>
        </view>
      </view>

      <view class="complete_box area">
        <!-- 头部盒子 -->
        <view class="top_box">
          <view class="left_box">其他功能</view>
        </view>
        <!-- 菜单栏 -->
        <view class="menu_two">
          <view class="for_menu" @tap="goUrl('/subpackage/user/user/my_superior')" v-if="agent_auth.includes(group_id)">
            <template>
              <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/user_icon1.png`" mode="scaleToFill" />
              <view class="title">我的上级</view>
            </template>
          </view>
          <view class="for_menu" @tap="promotional_poster">
            <template>
              <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/promotional_poster_icon.png`" mode="scaleToFill" />
              <view class="title">推广海报</view>
            </template>
          </view>
          <!-- 这里暂时没有点击事件 user/accepted_task -->
          <view class="for_menu" @tap="jump_join">
            <template>
              <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/user_icon3.png`" mode="scaleToFill" />
              <view class="title">已接任务</view>
            </template>
          </view>
          <view class="for_menu" @tap="onProtocol(6,'帮助中心')">
            <template>
              <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/user_icon5.png`" mode="scaleToFill" />
              <view class="title">帮助中心</view>
            </template>
          </view>
          <view class="for_menu" @tap="goUrl('/subpackage/user/user/user_payroll_record')">
            <template>
              <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/user_icon6.png`" mode="scaleToFill" />
              <view class="title">发薪记录</view>
            </template>
          </view>
          <view class="for_menu" @tap="goUrl('/subpackage/staff/workbench/registration_list/registration_list')" v-if="jurisdiction.includes(group_id) && is_principal == 1">
            <template>
              <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/registration_record_icon.png`" mode="scaleToFill" />
              <view class="title">报名记录</view>
            </template>
          </view>
          <view class="for_menu" @tap="goUrl('/subpackage/staff/workbench/returned_info/returned_info_list')">
            <template>
              <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/user_bank_account_icon.png`" mode="scaleToFill" />
              <view class="title">回款账户</view>
            </template>
          </view>
          <view class="for_menu" @tap="goUrl('/pages/public/auth/real_authentication')" v-if="sheep.$store('user')?.userInfo.is_authentication">
            <template>
              <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/user_icon10.png`" mode="scaleToFill" />
              <view class="title">实名认证</view>
            </template>
          </view>
      
          <view class="for_menu" @tap="goUrl('/subpackage/user/user/help-document')" v-if="agent_auth.includes(group_id)">
            <template>
              <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/user_icon11.png`" mode="scaleToFill" />
              <view class="title">操作手册</view>
            </template>
          </view>
          <view class="for_menu" @tap="onLogout">
            <template v-if="sheep.$store('user').isLogin">
              <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/user_icon8.png`" mode="scaleToFill" />
              <view class="title">退出登录</view>
            </template>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
  </s-layout>
</template>

<script setup>
import { onLaunch, onLoad,onShow } from "@dcloudio/uni-app";
import { reactive, ref,computed } from "vue";
import { baseUrl } from "@/sheep/config";
import sheep from '@/sheep';
import { showShareModal, showAuthModal } from '@/sheep/hooks/useModal';
import { isEmpty } from 'lodash';
// import user from '@'
const userStore = sheep.$store('user');
const { safeAreaInsets } = uni.getSystemInfoSync()

// userInfo.value = userStore.userInfo

const state = reactive({
  bgColor: "rgba(0,0,0,0)", // 导航条背景
  titleStyle: {
    // 文字颜色
    color: "#ffffff",
  },
  src: `${baseUrl}/uploads/uniapp_image/user/myavatar_defult@2.png`, // 头像地址
  text: "暂无头像", // 无头像显示
  size: "120rpx", //  头像尺寸
});

const is_authentication = ref(null)
const authentication = ref(false)

onLoad(() => {
  
})

const jurisdiction = ref([3,6,10,13]) // 总经理/技术/劳务派遣/外包
const agent_auth = ref([3,6,11])  // 总经理/技术/代理
const group_id = ref(0)
const is_principal = ref(0)
onShow(() => {
  if (sheep.$store('user').isLogin) {
    if(!isEmpty(userStore.userInfo.department)) {
      is_principal.value = userStore.userInfo.department.deparment.is_principal
    }

    group_id.value = userStore.userInfo.group_id
    if([3,6].includes(group_id.value)) {
      is_principal.value = 1
    }
    // getListDetail()
    // corner_mark_dimission_list()
    if(jurisdiction.value.includes(group_id.value)) {
      Request_corner_mark()
    }
  }
}) 

// 角标接口



// const corner_mark = ref()
const ask_leave = ref(0)
const dimission = ref(0)
const notification_count = ref(0)
const borrowing = ref(0)
const Request_corner_mark = () => {
  sheep.$api.notification.userUserTips().then((res) => {
    ask_leave.value = res.data.ask_leave
    dimission.value = res.data.dimission
    notification_count.value = res.data.notification_count
    borrowing.value = res.data.borrowing
    // corner_mark_leave.value = res.data.total
  });
}


// const status = ref('0,3')
// const corner_mark_leave = ref()
// const getListDetail = () => {
//   let obj = {
//     state: status.value,
//   };
//   let state_op = '=';
//   if(status.value == '0,3') {
//     state_op = 'in';
//   }
//   let params = {
//     filter: JSON.stringify(obj),
//     op: JSON.stringify({
//       state: state_op,
//     }),
//     with: 'user'
//   };
//   sheep.$api.leave.labor_dispatching_leave_Approve_list(params).then((res) => {
//     corner_mark_leave.value = res.data.total
//   });
// }

// const corner_mark_dimission = ref()
// const corner_mark_dimission_list = () => {
//     let obj = {
//       state: status.value,
//     };
//     let state_op = '=';
//     if(status.value == '0,3') {
//       state_op = 'in';
//     }
//     let params = {
//       filter: JSON.stringify(obj),
//       op: JSON.stringify({
//         state: state_op,
//       }),
//       with: 'user'
//     };
//     sheep.$api.dimission.dimissionProjectApproveList(params).then((res) => {
//       corner_mark_dimission.value = res.data.total
//     });
//   }

const appInfo = computed(() => sheep.$store('app').info);
const shareInfo = computed(() => {
  // if (isEmpty(state.value.data)) return {};
  return sheep.$platform.share.getShareInfo(
    {
      title: '',
      desc: '',
      params: {
        page: '1',
        query: '0',
      },
    },
    {
      type: 'user', // 邀请拼团海报
    },
  );
});


// 跳转编辑资料页
const editDatapage = () => {
  sheep.$router.go('/subpackage/user/user/edit_data')
}

// 切换用户端
const switchUser = async () => {
  const {code, data} = await sheep.$api.user.getUserEntry();
  if(code == 1) {
    if(!data) {
      showAuthModal('entry_info');
      return false
    }
  } else {
    sheep.$helper.toast(resust.msg);
  }
  
  userStore.setActive(0)
  userStore.setStayPort('staff')
  userStore.setabPort('staff')
  sheep.$router.go('/pages/staff/index/index')
}

const login = () => {
  sheep.$router.go('/pages/public/auth/authorization_login')
}

const bindMobile = () => {
  sheep.$router.go('/pages/public/auth/bind_mobile')
}

function onLogout() {
    uni.showModal({
      title: '提示',
      content: '确认退出账号？',
      success: async function (res) {
        if (res.confirm) {
          const result = await sheep.$store('user').logout();
          if (result) {
            userStore.setActive(0)
            userStore.setStayPort('user')  
            sheep.$router.go('/pages/user/index/index');
          }
        }
      },
    });
  }

// 查看协议
  function onProtocol(id, title) {
    sheep.$router.go('/pages/public/richtext', {
      id,
      title,
    });
  }

  // 推广海报

  function promotional_poster() {
    showShareModal();
  }

function goUrl(url,state,tabs) {
  if(tabs) {
    url =  url+`?state=${state}&tabs=${tabs}`;
    sheep.$router.go(url)
  } else {
    sheep.$router.go(url)
  }
}

function jump_join() {
  sheep.$router.go('/subpackage/user/user/accepted_task')
}

  // 暗口登录
  const number_of_clicks = ref(0)
  const total_degree = ref(10)
  const surreptitious_entry = () => {
    number_of_clicks.value++;
    if (number_of_clicks.value >= total_degree.value) {
      number_of_clicks.value = 0;
      sheep.$router.go('/pages/public/auth/login');
    } else {
      setTimeout(() => {
        number_of_clicks.value = 0;
      }, 5000);
    }
  };


</script>

<style scoped lang="scss">
  page {
    width: 100%;
    height: 100%;
    position: relative;
  }
  // 版心
  .area {
    width: calc(100% - 40rpx);
    margin: 0 20rpx;
  }
  // 头部盒子
  .background {
    background-size: 100%;
      background-repeat: no-repeat;
    width: 100%;
    display: flex;
    flex-direction: column;
    // 资料区
    .data_area {
      margin-top: 58rpx;
      height: 120rpx;
      display: flex;
      margin-bottom: 34rpx;
      // 头像
      .head {
        width: 20%;
        margin-left: 32rpx;
        :deep(.u-avatar__image) {
          box-shadow: 0px 4px 14px 0px rgba(88, 187, 255, 0.5);
        }
        // 显示开关盒子
        .displaySwitch {
          position: relative;
          image {
            height: 30rpx;
            width: 30rpx;
            position: absolute;
            right: 10%;
            bottom: 0;
          }
        }
      }
      // 名称 && 手机号
      .center {
        width: 45%;
        height: 100%;
        .phone_box {
          display: flex;
          align-items: center;
          image {
            width: 24rpx;
            height: 24rpx;
            margin-right: 10rpx;
            display: flex;
            align-items: center;
          }
        }
        .name {
          width: 100%;
          font-family: PingFangSC;
          color: $uni-text-color;
          font-weight: $uni-font-weight;
          font-size: 40rpx;
          font-style: normal;
          text-decoration: none;
          text-align: left;
          margin-bottom: 6rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .phone {
          width: 100%;
        }
        .position {
          display: inline-block;
          padding: 2rpx 12rpx;
          background-color: #FFFFFF;
          border-radius: 8.5px;
          font-family: PingFangSC;
          color: $uni-text-color;
          font-weight: 700;
          font-size: 20rpx;
          font-style: normal;
          text-decoration: none;
          text-align: center;
          line-height: 26rpx;
        }
      }
      // 编辑资料按钮
      .Edit_data {
        width: 35%;
        height: 100%;
        position: relative;
        .button {
          padding-right: 0;
          width: 165rpx;
          height: 46rpx;
          font-family: PingFangSC;
          color: #FF5200;
          font-weight: $uni-font-weight;
          font-size: $uni-font-size-sm;
          font-style: normal;
          line-height: 46rpx;
          background-color: #ffffff;
          border-radius: 22rpx;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
          display: flex;
          align-items: center;
          justify-content: center;

          .icon {
            margin-left: 5rpx;
            margin-top: 3rpx;
          }
        }
      }
    }
    // 父盒子
    .father {
      width: 100%;
      // 账户卡
      .account {
        border-radius: 16rpx 16rpx 0 0;
  background: linear-gradient(270deg, rgba(225, 228, 238, 1) 0%, rgba(255, 255, 255, 1) 100%);
        width: calc(100% - 40rpx);
        margin: 0 auto;
        // height: 138rpx;
          z-index: 3;
        display: flex;

        // 左侧余额
        .balance {
          width: 72%;
          height: 100%;
          .top_box {
            height: 50%;
            display: flex;
            
            image {
              width: 27rpx;
              height: 28rpx;
              padding-top: 32rpx;
              padding-left: 32rpx;
            }
            .title {
              padding: 32rpx 0rpx 32rpx 30rpx;
              // padding-top: 32rpx;
              // padding-left: 30rpx;
              color: #333333;
              font-weight: 600;
              font-size: 34rpx;
              font-weight: 600;
            }
          }
          .money {
            height: 50%;
            color: #999999;
            font-weight: 500;
            font-size: 22rpx;
            text-align: left;
            line-height: 60rpx;
            padding-left: 30rpx;
          }
        }
        // 右侧按钮集合
        .Button_set {
          width: 25%;
          height: calc(100% - 92rpx);
          display: flex;
          padding-top: 44rpx;
          // 充值 && 提现
          .top_up {
            // width: 164rpx;
            height: 52rpx;
            border-radius: 16rpx;
          background-color: #2B3C74;
            font-family: PingFangSC;
            color: #fff;
            font-weight: $uni-font-weight;
            font-size: $uni-font-size-sm;
            font-style: normal;
            text-decoration: none;
            text-align: center;
            line-height: 52rpx;
          }
        }
      }
    
    }
  }

  // 切换用户端口盒子
  .content{
    border-radius: 20rpx 20rpx 0 0;
    background-color: #F5F5F5;
    z-index: 3;
    width: 100%;
  }
  .switchover {

    // 信息栏
    .information_bar {
      height: 140rpx;
      margin: 0 10rpx;
      margin-top: 20rpx;
      padding-bottom: 10rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  // 全部功能
  .complete_box {
    background-color: #ffffff;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
    border-radius: 16rpx;
    margin-top: 20rpx;
    // 头部盒子
    .top_box {
      height: 65rpx;
      border-radius: 16rpx;
      display: flex;
      padding-left: 32rpx;
      padding-right: 20rpx;
      // 左
      .left_box {
        width: 50%;
        height: 100%;
        line-height: 98rpx;
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: 550;
        font-size: $uni-font-size-base;
        font-style: normal;
        text-decoration: none;
        text-align: left;
      }
    }
    // 菜单栏
    .menu_two {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 20rpx;
      padding-bottom: 40rpx;
      .for_menu {
        width: 25%;
        padding-top: 40rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        image {
          width: 70rpx;
          height: 70rpx;
        }
        .title {
          font-family: PingFangSC;
          color: $uni-text-color;
          font-weight: $uni-font-weight;
        font-size:$uni-font-size-26;
          font-style: normal;
          text-decoration: none;
          margin-top: 4rpx;
        }
      }
    }
  }
  //我的钱包余额
  .my_money{
    border-radius: 16rpx;
    background-color: #FFFFFF;
    height: 138rpx;
  margin: 20rpx auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left{width: 76%;
      .top_box {
            display: flex;
            height: 55rpx;
            align-items: center;
            padding-left: 32rpx;
            image {
              width: 27rpx;
              height: 28rpx;
            
            
            }
            .title {
            margin-left: 10rpx;
              font-family: PingFangSC;
              color: #333333;
              font-weight: 500;
              font-size: 24rpx;
              font-style: normal;
            }
          }
          .money {
            text{
              font-size: 32rpx;
            }
            height: 50%;
            color: #333333;
            font-weight: 600;
            font-size: 44rpx;
            text-align: left;
            padding-left: 20rpx;
          }
    }
    .line{
      width: 24rpx;
      height: 110rpx;
      image{
        width: 100%;
        height: 100%;
      }
    }
    .right{
      width: 20%;
      display: flex;
      flex-direction: column;
      text-align: center;
      view{
        font-family: PingFangSC;
          color: #333333;
          font-weight: 600;
          font-size: 26rpx;
          margin-bottom: 6rpx;
      }
    }
  }

  .corner_mark {
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
    position: absolute;
    right: 40rpx;
    top: 30rpx;
    background-color: red;
    color: #ffffff;
    padding: 5rpx;
    text-align: center;
    line-height: 30rpx;
    font-size: 20rpx;
  }
</style>